<template>
  <div v-transfer-dom class="charge">
    <x-dialog v-model="$store.state.dialogs.charge.show">
      <div class="box">
        <p class="title-box pr">
          <span class="line"></span>
          <span class="dot"></span>
          <span class="title">佣金提现</span>
          <span class="dot"></span>
          <span class="line"></span>
        </p>
        
        <p v-for="(item,index) in getInfo">
          <img :src="item.img" alt="">
          <span>{{item.label}}：</span>
          <span class="money color-gold" v-if="item.money">{{item.money}}</span>
          <span v-else class="radio-box">
            <span v-for="(radio,index) in item.children" @click="changeChoose(item,radio)">
              <span><img :src="radio.active?imgs.choose1:imgs.choose" alt=""></span>
              <span>{{radio.label}}</span>
            </span>
          </span>
        </p>

        <p class="btn"><span class="color999" @click="$store.state.dialogs.charge.show=false">取消申请</span><span class="color-gold" @click="save">提交申请</span></p>
      </div>
    </x-dialog>
  </div>
</template>
<script>
import { XDialog ,TransferDomDirective as TransferDom} from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {XDialog},
  name: "",
  data() {
    return {
      imgs:{
        choose:require("../../../assets/img/hpmepage/renew/choose.png"),
        choose1:require("../../../assets/img/hpmepage/renew/choose_1.png")
      },
      listData:[
        {
          label:"佣金金额（元）",
          img:require('../../../assets/img/vip/charge/1.png'),
          money:1000,
        },{
          label:"可提现金额（元）",
          img:require('../../../assets/img/vip/charge/2.png'),
          money:0,
        },{
          label:"提现至",
          img:require('../../../assets/img/vip/charge/3.png'),
          children:[
            {
              label:"微信红包",
              active:true,
            },{
              label:"会员卡余额",
              active:false
            }
          ]
        },
      ]
    };
  },
  computed:{
    getInfo(){
      this.listData[0].money=this.$store.state.dialogs.charge.money
      this.listData[1].money=Math.floor(this.listData[0].money / 100)*100
      return this.listData
    }
  },
  methods: {
    changeChoose(item,radio){
      for(var one of item.children){
        one.active=false
      }
      this.$set(radio,"active",true)
    },


    // 提交申请
    save(){
      this.$store.state.dialogs.charge.show=false

      this.$store.state.dialogs.alert.title=""
      this.$store.state.dialogs.alert.content="提现申请成功，请留意到账情况。"
      this.$store.state.dialogs.alert.show=true
      console.log("click----提交提现申请")
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.charge {
  font-size: 14px;
  color: #333;

  p{
    text-align: left;
    padding: 5px 15px;

    img{
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  .title-box{
    text-align: center;
    padding-top: 20px;
  }
  .title{
    font-size: 16px;
    padding: 0 3px;
  }
  .dot{
    display: inline-block;
    width: 0;
    padding: 3px;
    border-radius: 50%;
    background-color:#FC9522; 
    transform: translateY(-2px)
  }
  .line{
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color:#FC9522; 
    transform: translateY(-4px)
  }

  .box{
    // padding: 20px;
    padding-bottom: 0;
  }

  .radio-box{
    display: block;
    margin-top: 5px;
    color: #666;
    display: flex;
    width: 80%;
    justify-content: space-between;
    text-align: center;

    >span{
      width: 45%;
      font-size: 12px;

      img{
        transform: translateY(3px)
      }
    }
  }
  
  .btn{
    display: flex;
    justify-content: space-around;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #f2f2f2;
    padding: 0;
    margin-top: 5px;

    span{
      width: 50%;
      text-align: center;
    }
    span:nth-child(1){
      border-right: 1px solid #f2f2f2;
    }
    span:active{
      opacity: .6;
    }
  }
}
</style>